<script setup lang="ts">
import {onMounted} from "vue";
import * as echarts from "echarts";

onMounted(() => {
  initChart3()
})

function initChart3() {
  // 初始化图表
  const chart = echarts.init(document.getElementById('tensionChart'));
  const fullTensionEl = document.getElementById('fullTension');
  const emptyTensionEl = document.getElementById('emptyTension');
  const actualTensionEl = document.getElementById('actualTension');

  // 生成模拟数据
  function generateData() {
    const now = new Date();
    const categories = [];
    const fullData = [];
    const emptyData = [];
    const actualData = [];

    // 生成30个时间点的数据
    for (let i = 0; i < 30; i++) {
      const time = new Date(now);
      time.setMinutes(time.getMinutes() - 30 + i);

      categories.push(time.getMinutes() + ':' + (time.getSeconds() < 10 ? '0' : '') + time.getSeconds());

      // 满轴张力 - 基本稳定，小幅波动
      let fullValue = 50 + Math.sin(i * Math.PI / 15) * 2 + Math.random() * 1;
      fullValue = Math.round(fullValue * 10) / 10;
      fullData.push(fullValue);

      // 空轴张力 - 比满轴略低，波动稍大
      let emptyValue = 45 + Math.sin(i * Math.PI / 12) * 3 + Math.random() * 1.5;
      emptyValue = Math.round(emptyValue * 10) / 10;
      emptyData.push(emptyValue);

      // 实际张力 - 在两者之间波动
      let actualValue = (fullValue + emptyValue) / 2 + (Math.random() - 0.5) * 5;
      actualValue = Math.max(emptyValue * 0.9, Math.min(fullValue * 1.1, actualValue));
      actualValue = Math.round(actualValue * 10) / 10;
      actualData.push(actualValue);
    }

    return {categories, fullData, emptyData, actualData};
  }

  // 获取数据
  const {categories, fullData, emptyData, actualData} = generateData();

  // 更新实时显示
  fullTensionEl.textContent = fullData[fullData.length - 1];
  emptyTensionEl.textContent = emptyData[emptyData.length - 1];
  actualTensionEl.textContent = actualData[actualData.length - 1];

  // 图表配置
  const option = {
    // backgroundColor: 'transparent',
    grid: {
      top: 10,
      left: 10,
      right: 55,
      bottom: 0,
      containLabel: true
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(10, 20, 40, 0.9)',
      borderColor: '#00f7ff',
      borderWidth: 1,
      textStyle: {
        color: '#ffffff'
      },
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#00f7ff',
          color: '#0a0a1a'
        }
      },
      formatter: function (params) {
        let result = '<div style="font-weight:bold;margin-bottom:5px;">'
            + params[0].axisValue + '</div>';
        params.forEach(item => {
          result += `<div style="display:flex;align-items:center;margin:3px 0;">
                                    <span style="display:inline-block;width:10px;height:3px;background:${item.color};margin-right:5px;"></span>
                                    ${item.seriesName}: <span style="font-weight:bold;margin-left:5px;">${item.value} N</span>
                                  </div>`;
        });
        return result;
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: categories,
      axisLine: {
        lineStyle: {
          color: 'rgba(0, 247, 255, 0.5)'
        }
      },
      axisLabel: {
        color: 'rgba(0, 247, 255, 0.8)',
        fontSize: 11,
        rotate: 45
      },
      axisTick: {
        alignWithLabel: true,
        lineStyle: {
          color: 'rgba(0, 247, 255, 0.2)'
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(0, 247, 255, 0.1)'
        }
      }
    },
    yAxis: {
      type: 'value',
      name: '张力值 (N)',
      nameTextStyle: {
        color: 'rgba(0, 247, 255, 0.8)',
        padding: [0, 0, 0, 30]
      },
      min: 30,
      max: 60,
      axisLine: {
        lineStyle: {
          color: 'rgba(0, 247, 255, 0.5)'
        }
      },
      axisLabel: {
        color: 'rgba(0, 247, 255, 0.8)',
        fontSize: 11
      },
      axisTick: {
        lineStyle: {
          color: 'rgba(0, 247, 255, 0.2)'
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(0, 247, 255, 0.1)'
        }
      },
      splitArea: {
        show: true,
        areaStyle: {
          color: ['rgba(0, 247, 255, 0.02)', 'rgba(0, 247, 255, 0.05)']
        }
      }
    },
    series: [
      {
        name: '满轴张力',
        type: 'line',
        smooth: true,
        data: fullData,
        symbol: 'circle',
        symbolSize: 6,
        lineStyle: {
          width: 3,
          color: '#00f7ff'
        },
        itemStyle: {
          color: '#00f7ff',
          borderColor: '#ffffff',
          borderWidth: 1
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {offset: 0, color: 'rgba(0, 247, 255, 0.3)'},
            {offset: 1, color: 'rgba(0, 247, 255, 0.05)'}
          ])
        },
        markLine: {
          silent: true,
          data: [
            {
              name: '满轴上限',
              yAxis: 55,
              lineStyle: {
                color: '#ff5555',
                width: 1,
                type: 'dashed'
              },
              label: {
                position: 'end',
                formatter: '上限: 55N',
                color: '#ff5555',
                fontSize: 10
              }
            }
          ]
        }
      },
      {
        name: '空轴张力',
        type: 'line',
        smooth: true,
        data: emptyData,
        symbol: 'circle',
        symbolSize: 6,
        lineStyle: {
          width: 3,
          color: '#ffffaa'
        },
        itemStyle: {
          color: '#ffffaa',
          borderColor: '#ffffff',
          borderWidth: 1
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {offset: 0, color: 'rgba(255, 0, 170, 0.3)'},
            {offset: 1, color: 'rgba(255, 0, 170, 0.05)'}
          ])
        },
        markLine: {
          silent: true,
          data: [
            {
              name: '空轴下限',
              yAxis: 40,
              lineStyle: {
                color: '#ffaa00',
                width: 1,
                type: 'dashed'
              },
              label: {
                position: 'end',
                formatter: '下限: 40N',
                color: '#ffaa00',
                fontSize: 10
              }
            }
          ]
        }
      },
      {
        name: '实际张力',
        type: 'line',
        smooth: true,
        data: actualData,
        symbol: 'circle',
        symbolSize: 6,
        lineStyle: {
          width: 3,
          color: '#00ff88'
        },
        itemStyle: {
          color: '#00ff88',
          borderColor: '#ffffff',
          borderWidth: 1
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {offset: 0, color: 'rgba(0, 255, 136, 0.3)'},
            {offset: 1, color: 'rgba(0, 255, 136, 0.05)'}
          ])
        },
        markPoint: {
          data: [
            {
              type: 'max',
              name: '最大值',
              symbol: 'triangle',
              symbolSize: 30,
              itemStyle: {
                normal: {
                  color: "#ff5555",
                  // label:{
                  //   show:true,
                  //   color:"#FFFFFF"
                  // }
                }
              },
              symbolOffset: [0, -30],
              label: {
                formatter: '最大: {c}N',
                color: '#ffffff',
                backgroundColor: '#ff5555',
                padding: [3, 6],
                borderRadius: 4
              }
            },
            {
              type: 'min',
              name: '最小值',
              symbol: 'triangle',
              symbolSize: 30,
              itemStyle: {
                normal: {
                  color: "#ffaa00",
                  // label:{
                  //   show:true,
                  //   color:"#FFFFFF"
                  // }
                }
              },
              symbolOffset: [0, 50],
              label: {
                formatter: '最小: {c}N',
                color: '#ffffff',
                backgroundColor: '#ffaa00',
                padding: [3, 6],
                borderRadius: 4
              }
            }
          ]
        }
      }
    ]
  };
  chart.setOption(option);

  function updateData() {
    // 移除第一个数据点
    const newCategories = [...categories.slice(1)];
    const newFullData = [...fullData.slice(1)];
    const newEmptyData = [...emptyData.slice(1)];
    const newActualData = [...actualData.slice(1)];

    // 添加新的数据点
    const now = new Date();
    const timeStr = now.getMinutes() + ':' + (now.getSeconds() < 10 ? '0' : '') + now.getSeconds();

    // 满轴张力 - 基本稳定，小幅波动
    let fullValue = 50 + Math.sin(newFullData.length * Math.PI / 15) * 2 + Math.random() * 1;
    fullValue = Math.round(fullValue * 10) / 10;

    // 空轴张力 - 比满轴略低，波动稍大
    let emptyValue = 45 + Math.sin(newEmptyData.length * Math.PI / 12) * 3 + Math.random() * 1.5;
    emptyValue = Math.round(emptyValue * 10) / 10;

    // 实际张力 - 在两者之间波动
    let actualValue = (fullValue + emptyValue) / 2 + (Math.random() - 0.5) * 5;
    actualValue = Math.max(emptyValue * 0.9, Math.min(fullValue * 1.1, actualValue));
    actualValue = Math.round(actualValue * 10) / 10;

    // 添加新数据
    newCategories.push(timeStr);
    newFullData.push(fullValue);
    newEmptyData.push(emptyValue);
    newActualData.push(actualValue);

    // 更新实时显示
    fullTensionEl.textContent = fullValue;
    emptyTensionEl.textContent = emptyValue;
    actualTensionEl.textContent = actualValue;

    // 更新图表数据
    chart.setOption({
      xAxis: {
        data: newCategories
      },
      series: [
        {
          data: newFullData
        },
        {
          data: newEmptyData
        },
        {
          data: newActualData
        }
      ]
    });

    // 每1秒更新一次数据
    setTimeout(updateData, 1000);
  }

  // 启动数据更新
  updateData();
}
</script>

<template>
  <div id="left3" class="pressure-panel">
    <div class="corner corner-tl"></div>
    <div class="corner corner-tr"></div>
    <div class="corner corner-bl"></div>
    <div class="corner corner-br"></div>

    <div class="panel-title">绞线机张力监控</div>
    <div class="panel-subtitle">满轴张力 / 空轴张力 / 实际张力</div>

    <div class="legend-container">
      <div class="legend-item">
        <div class="legend-color" style="background: #00f7ff;"></div>
        <span>满轴张力</span>
      </div>
      <div class="legend-item">
        <div class="legend-color" style="background: #ffffaa;"></div>
        <span>空轴张力</span>
      </div>
      <div class="legend-item">
        <div class="legend-color" style="background: #00ff88;"></div>
        <span>实际张力</span>
      </div>
    </div>

    <div class="real-time-data">
      <div class="data-item">
        <span class="status-indicator" style="color: #00f7ff;"></span>
        <span class="data-label">满轴张力:</span>
        <span class="data-value" id="fullTension" style="color: #00f7ff;">0.0</span>
        <span style="font-size: 12px; color: rgba(255,255,255,0.5);">N</span>
      </div>
      <div class="data-item">
        <span class="status-indicator" style="color: #ff00aa;"></span>
        <span class="data-label">空轴张力:</span>
        <span class="data-value" id="emptyTension" style="color: #ffffaa;">0.0</span>
        <span style="font-size: 12px; color: rgba(255,255,255,0.5);">N</span>
      </div>
      <div class="data-item">
        <span class="status-indicator" style="color: #00ff88;"></span>
        <span class="data-label">实际张力:</span>
        <span class="data-value" id="actualTension" style="color: #00ff88;">0.0</span>
        <span style="font-size: 12px; color: rgba(255,255,255,0.5);">N</span>
      </div>
    </div>

    <div class="chart-container" id="tensionChart"></div>
  </div>
</template>


<style scoped>
/* 主面板容器 */
.pressure-panel {
  width: 21%;
  height: 27%;
  background: rgba(10, 20, 40, 0.7);
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 0 30px rgba(0, 247, 255, 0.3);
  border: 1px solid rgba(0, 247, 255, 0.2);
  position: absolute;
  overflow: hidden;
  backdrop-filter: blur(5px);
}

/* 科技感边框效果 */
.pressure-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid transparent;
  border-image: linear-gradient(
      to right,
      rgba(0, 247, 255, 0),
      rgba(0, 247, 255, 0.8),
      rgba(0, 247, 255, 0)
  ) 1 1;
  pointer-events: none;
}

/* 网格背景 */
.pressure-panel::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(90deg, rgba(0, 247, 255, 0.1) 1px, transparent 1px) 0 0 / 20px 20px,
  linear-gradient(rgba(0, 247, 255, 0.1) 1px, transparent 1px) 0 0 / 20px 20px;
  pointer-events: none;
  opacity: 0.3;
  z-index: 0;
}

/* 四角装饰 */
.corner {
  position: absolute;
  width: 15px;
  height: 15px;
  border-style: solid;
  border-color: #00f7ff;
  pointer-events: none;
}

.corner-tl {
  top: 0;
  left: 0;
  border-width: 2px 0 0 2px;
}

.corner-tr {
  top: 0;
  right: 0;
  border-width: 2px 2px 0 0;
}

.corner-bl {
  bottom: 0;
  left: 0;
  border-width: 0 0 2px 2px;
}

.corner-br {
  bottom: 0;
  right: 0;
  border-width: 0 2px 2px 0;
}

/* 面板标题 */
.panel-title {
  font-size: 20px;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #00f7ff;
  text-shadow: 0 0 10px rgba(0, 247, 255, 0.7);
  position: relative;
  z-index: 1;
}

/* 面板副标题 */
.panel-subtitle {
  font-size: 14px;
  margin-bottom: 20px;
  color: rgba(0, 247, 255, 0.8);
  position: relative;
  z-index: 1;
}


/* 图例容器 */
.legend-container {
  position: absolute;
  top: 5px;
  right: 15px;
  display: flex;
  gap: 15px;
  z-index: 2;
}

.legend-item {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
}

.legend-color {
  width: 12px;
  height: 3px;
  margin-right: 6px;
  border-radius: 2px;
}

/* 实时数据展示 */
.data-item {
  display: flex;
  align-items: center;
}

.data-label {
  width: 60px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

.data-value {
  font-size: 14px;
  font-weight: bold;
  color: #ffffff;
  min-width: 50px;
}

/* 状态指示灯 */
.status-indicator {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 5px;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

/* 图表容器 */
.chart-container {
  width: 100%;
  height: 76%;
  position: relative;
  z-index: 1;
}

/* 实时数据展示 */
.real-time-data {
  width: 150px;
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(0, 247, 255, 0.1);
  border: 1px solid rgba(0, 247, 255, 0.3);
  border-radius: 6px;
  z-index: 2;
}

.real-time-value {
  font-size: 20px;
  font-weight: bold;
  color: #ffffff;
}

.real-time-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 5px;
}

/* 警告区域 */
.warning-area {
  position: absolute;
  bottom: 20px;
  left: 20px;
  background: rgba(255, 170, 0, 0.1);
  border: 1px solid rgba(255, 170, 0, 0.3);
  border-radius: 6px;
  padding: 8px 12px;
  z-index: 2;
  display: flex;
  align-items: center;
}

.warning-icon {
  width: 12px;
  height: 12px;
  background: #ffaa00;
  border-radius: 50%;
  margin-right: 8px;
  animation: pulse 2s infinite;
}

.warning-text {
  font-size: 12px;
  color: #ffaa00;
}

.pressure-panel:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 0 30px rgba(0, 247, 255, 0.5);
}
</style>
